<template>
  <div class="play-video">
    <div class="video-box">
      <!--<video src="../../images/test.mp4" class="vam w100" style="height: 12.5rem"-->
      <!--ref="video"-->
      <!--@play="addRecord"-->
      <!--controls></video>-->
      <gl-play-video :video="videoInfo" height="12.5rem" :video-stop="videoStop" autoplay :cid="cid"></gl-play-video>
      <div class="text">
        <div class="name">{{videoInfo.name}}</div>
        <div class="detail">
          <div class="count fr">{{videoInfo.record_count}}次播放</div>
          <div class="teacher">主讲老师：{{videoInfo.teacher_name}}</div>
        </div>
      </div>
    </div>
    <div class="video-list">
      <div class="list-title">课时列表</div>
      <van-list v-model="loading"
                class="list ova"
                :finished="list.length >= total"
                finished-text="没有更多了"
                :offset="0"
                @load="curr ++">
        <div class="list-box">
          <div v-for="(item, i) in list" class="item por" :class="{
          active: item.id === active,
          played: false
          }" :key="i">
            <div class="name ovh" :before="('0'+ (i + 1)).slice(-2)" @click="clickItem(item)">
              {{item.name}}
              <vip-tip v-show="!userInfo.is_vip" :is-vip="!item.is_free" class="tip fr"></vip-tip>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "PlayVideo",
    data() {
      return {
        vid: '',
        cid: '',
        active: '',
        loading: false,
        finished: false,
        videoStop: false,
        videoInfo: {},
        list: [],
        total: 0,
        curr: 1,
        limits: 10,
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'productInfo'
      ])
    },
    created() {
      this.vid = this.$route.params.vid;
      this.cid = this.$route.params.cid;
      this.active = this.vid;
      this.getList();
      this.getVideo(this.vid);
    },
    watch: {
      curr(val) {
        this.getList();
      }
    },
    methods: {
      getList() {
        this.http.$post('api/resource.resources/get_resources_list', {
          curr: this.curr,
          limits: this.limits,
          product_id: this.productInfo.product_id,
          course_id: this.cid,
        }).then(res => {
          this.list.push(...res.list);
          this.total = res.total;
          this.loading = false;
        }).catch(this.$err);
      },
      getVideo(rid, name) {
        this.http.$post('api/resource.resources/get_resource_details', {
          resources_id: rid,
          resources_name: name,
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id,
          prefix: 'aiapp',
        }).then(res => {
          res.src = res.video_url;
          res.poster = res.bigimg;
          document.title = res.name;
          this.videoInfo = res;
          this.active = res.id;
        }).catch(this.$err);
      },
      clickItem(row) {
        if (row.is_free || row.is_pay || this.userInfo.is_vip) {
          if (row.id === this.active) return;
          this.getVideo(row.id, row.name);
        } else {
          this.util.goToPlay({}, '', '', () => {
            // 弹出弹框前
            this.videoStop = true;
          }, () => {
            // 弹框关闭后
            this.videoStop = false;
          });
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .play-video {
    background-color: #f6f6f6;
  }

  .video-box {
    margin-bottom: .63rem;
    background: #fff;
    line-height: 1;
    .text {
      padding: 1.5rem 1rem .72rem;
      font-size: .75rem;
      color: #999;
      .name {
        margin-bottom: .97rem;
        font-size: .94rem;
        color: #222;
      }
      .count {
        color: #b5b5b5;
      }
    }
  }

  .video-list {
    line-height: 1;
    background-color: #fff;
    .list-title {
      padding: .94rem .97rem;
      border-bottom: #e8e8e8 solid .05rem;
      font-size: .88rem;
      color: #222;
      &:before {
        content: '';
        margin-right: .41rem;
        display: inline-block;
        vertical-align: top;
        width: .19rem;
        height: .88rem;
        background-color: #2167f3;
      }
    }
    .list {
      height: calc(100vh - 21rem);
    }
    .list-box {
      padding-left: 2.69rem;
    }
    .item {
      padding-right: .97rem;
      font-size: .88rem;
      line-height: 2.75rem;
      color: #666;
      & + .item {
        border-top: #e8e8e8 solid .03rem;
      }
      &.played {
        color: #b5b5b5;
      }
      &.active {
        color: #2167f3;
      }
      .name:before {
        content: attr(before);
        position: absolute;
        left: -1.69rem;
        color: #b5b5b5;
      }
      .tip {
        margin-top: .91rem;
      }
    }
  }

</style>
